<template>
  <card :title="title" more>
    <template v-slot:content>
      <div class="content">
        <div class="calendar">
          <button
            type="button"
            class="el-carousel__arrow el-carousel__arrow--left"
            @click="nextWeek(-7)"
          >
            <i class="el-icon-arrow-left"></i>
          </button>
          <div class="weekDate">
            <div class="week" v-for="(item,index) in weekData" :key="index">
              <div class="weekName">{{ week[index] }}</div>
              <div
                :class="formatDateBo(datetIime) == item?'day select_day':'day'"
                @click="change($event,item)"
              >{{item.split("-")[2]}}</div>
            </div>
          </div>
          <button
            type="button"
            class="el-carousel__arrow el-carousel__arrow--right"
            @click="nextWeek(7)"
          >
            <i class="el-icon-arrow-right"></i>
          </button>
        </div>
        <div class="schedule">
          <!-- <div class="plan" v-for="(item,index) in planList" :key="index">
            <div class="top">
              <div class="time">{{ `${item.time.split(':')[0]>12?'下午':'中午'} ${item.time}` }}</div>
              <div class="more">详情</div>
            </div>
            <div class="plan_info">{{ item.value }}</div>
          </div>-->
          <div class="date">
            <div class="top-date">{{date1}} 星期{{date2}}</div>
            <div class="day">{{date3}}</div>
            <div class="bottom-date">【{{date4}}】 农历{{date5}}</div>
            <!-- <div class="bottom-date2">农历七月初八</div> -->
          </div>
          <div class="flex">
            <div class="xz">
              <div class="xz-title">星座</div>
              {{ xz }}
            </div>
            <div class="yx">
              <div class="yx-title">月相</div>
              {{ yx }}
            </div>
          </div>

          <div class="yj-title">今日黄历</div>
          <div class="yj">
            <div class="yj-list">
              <div class="yi">宜</div>
              <div class="yj-item">{{ yList }}</div>
            </div>
            <div class="yj-list">
              <div class="ji">忌</div>
              <div class="yj-item">{{ jList }}</div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </card>
</template>

    <script>
import { Solar, Lunar, HolidayUtil } from "lunar-javascript";
import card from "@/views/homePage/components/card";
export default {
  props: {
    title: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      datetIime: new Date(),
      date1: "",
      date2: "",
      date3: "",
      date4: "",
      date5: "",
      date6: "",
      yList: "",
      jList: "",
      xz: "",
      yx: "",
      weekData: [],
      week: ["日", "一", "二", "三", "四", "五", "六"],
      planList: [
        {
          time: "9:00",
          value: "阅读新闻早报，查看今日工作计划，开周会"
        },
        {
          time: "10:00",
          value: "设计工作任务“个人中心”，并和产品经理沟通具体事宜，八八八八八"
        },
        {
          time: "14:30",
          value: "需求评审会，确定相关细节和需求调整"
        },
        {
          time: "16:00",
          value: "日历首页改版需求"
        },
        {
          time: "17:00",
          value: "1111111111111111"
        }
      ]
    };
  },
  components: {
    card
  },
  mounted() {
    this.getWeekDate(this.datetIime, 7);
    this.datetIime = new Date();
    this.getLunar(this.datetIime);
  },
  methods: {
    // 获取阴历
    getLunar(datetIime) {
      console.log("datetIime", datetIime);
      var d = Lunar.fromDate(datetIime);
      this.date1 = datetIime.format("yyyy-MM-dd");
      this.date2 = d.getWeekInChinese();
      this.date3 = datetIime.format("d");
      this.date4 = d.getYearShengXiao();
      this.date5 = d.getMonthInChinese() + "月" + d.getDayInChinese();
      // 宜
      let yi = d.getDayYi();
      this.yList = yi.join(" ");

      // 忌
      let ji = d.getDayJi();
      this.jList = ji.join(" ");

      var d2 = Solar.fromDate(datetIime);
      this.xz = d2.getXingZuo();
      this.yx = d.getYueXiang();
      console.log(d.getDayYi());
    },
    // 获取所在周的日期
    getWeekDate(date, step) {
      //   date.setDate(date.getDate());
      let weekData = [];
      const week = date.getDay();
      date = this.formatDateBo(this.getDateByDate(date, week * -1));

      for (let i = 0; i < step; i++) {
        weekData.push(
          this.formatDateBo(
            i == 0 ? new Date(date) : this.getDateByDate(new Date(date), i)
          )
        );
      }
      this.weekData = weekData;
    },
    // 获取传入日期的,+/-range天数，得到新的日期
    getDateByDate(date, range = 0) {
      date.setDate(date.getDate() + range);
      return date;
    },
    formatDateBo(date) {
      let year = date.getFullYear();
      let month =
        date.getMonth() + 1 > 9
          ? date.getMonth() + 1
          : "0" + (date.getMonth() + 1);
      let day = date.getDate() > 9 ? date.getDate() : "0" + date.getDate();
      return `${year}-${month}-${day}`;
    },
    change(el, item) {
      console.log("item", item);
      for (let index = 0; index < 7; index++) {
        document.querySelectorAll(".day")[index].className = "day";
      }
      el.target.className = "day select_day";
      this.getLunar(new Date(item));
    },
    nextWeek(range) {
      let old_datetIime = new Date(this.formatDateBo(this.datetIime));
      let weekDate = this.getDateByDate(this.datetIime, range);

      this.getWeekDate(weekDate, 7);
      console.log("111111111");
      this.datetIime = this.getDateByDate(old_datetIime, range);
      this.getLunar(new Date(this.datetIime));
    }
  }
};
</script>

    <style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  .calendar {
    height: 0.625rem;
    position: relative;

    .weekDate {
      height: 100%;
      width: 100%;
      padding: 0 0.75rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.2rem;

      .weekName {
        color: #707070;
        padding: 0.075rem;
      }
      .day {
        font-weight: 700;
        padding: 0.075rem;
        cursor: pointer;
        &:hover {
          background: #233188;
          color: #ffffff;
          border-radius: 0.125rem;
        }
      }
      .select_day {
        background: #233188;
        color: #ffffff;
        border-radius: 0.125rem;
      }
    }
  }
  .schedule {
    height: calc(100% - 1rem);
    overflow-y: auto;
    margin-top: 0.575rem;
    font-size: 0.2rem;
    // border-bottom: 1px solid #ebeef5;
    .date {
      color: #38f;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      .top-date {
        font-size: 0.25rem;
      }
      .day {
        font-size: 0.625rem;
      }
    }
    .flex {
      display: flex;
      align-items: center;
      margin-top: 0.2rem;
      .xz {
        display: flex;
        align-items: center;
        padding: 0.25rem;
        .xz-title {
          color: #ffffff;
          background-color: #11b2c1;
          padding: 0.05rem 0.125rem;
          margin-right: 0.25rem;
        }
      }
      .yx {
        display: flex;
        align-items: center;
        padding: 0.25rem;
        .yx-title {
          color: #ffffff;
          background-color: #c1af11;
          padding: 0.05rem 0.125rem;
          margin-right: 0.25rem;
        }
      }
    }

    .yj-title {
      font-weight: 700;
      font-size: 0.2rem;
      // margin-top: 0.25rem;
    }
    .yj {
      padding: 0.25rem;
      .yj-list {
        display: flex;
        align-items: flex-start;
        margin-bottom: 0.25rem;
        .yi {
          color: #ffffff;
          background-color: #5bc111;
          padding: 0.05rem 0.125rem;
        }
        .ji {
          color: #ffffff;
          background-color: #fc3939;
          padding: 0.05rem 0.125rem;
        }
        .yj-item {
          margin-left: 0.25rem;
        }
      }
    }

    // .plan {
    //   border-top: 1px solid #ebeef5;
    //   padding: 0.125rem 0.375rem;
    //   // height: 80px;
    //   .top {
    //     display: flex;
    //     align-items: center;
    //     justify-content: space-between;
    //     margin-bottom: 0.125rem;
    //     .time {
    //       color: #a6a8ac;
    //     }
    //     .more {
    //       cursor: pointer;
    //       color: rgb(64, 158, 255);
    //     }
    //   }
    //   .plan_info {
    //     font-weight: 700;
    //   }
    // }
  }
}
::v-deep .el-carousel__arrow--right {
  right: 0.125rem;
}
::v-deep .el-carousel__arrow--left {
  left: 0.125rem;
}
</style>
